#include ("/_includes/_layout.html")
#@layout("用户管理", "wxmall,点步科技", "Wxmall社区","wxmall") 
#define content()
#define css()
<link href="#(webctx)/resources/css/pretty.min.css" rel="stylesheet"/>	
<link href="#(webctx)/resources/css/component-chosen.min.css" rel="stylesheet"/>	
<style>
#content-main,.js-canvi-content{
	padding: 0px;
	overflow: hidden;
}
.canvi-navbar{
	margin-top: 30px;
	float: left;
	padding-left: 25px;
	padding-right: 0px;
}
.navbar-box{
	background-color: white;
	margin: 5px;
	border-radius:5px;
}
.form-control{
	border-radius: 5px;
   	transition: all .5s;
}
.input-borshow {
    height: 33px !important;
}
.input-borshow:focus {
    border-style:solid;
    border-color: #5bc0de !important;
	box-shadow: 0 0 5px #5bc0de;
}
.form-group{
	margin-bottom: 10px;
}
.kymdok{
	overflow: hidden;
	position: relative;
}
.dropdown-right{
	float: right;
}
.name-left{
	position: absolute;
   	bottom: 0px;
}
.baritem{
	margin-bottom:20px; 
}
.pretty {
	margin-right: 10px;
	margin-bottom: 0px;
	padding: 0px;
}
.pretty i{
	padding: 2px;
	font-size: 1em !important;
	margin-right: 7px;
}
.pretty span{
	font-size: 12px;
	position:relative;
	top:-2px;
}
.pretty.info input:checked+label span{
	color: #5bc0de !important;
}
.sel-box{
	padding: 6px 8px;
    height: auto;
    font-size: 12px;
    cursor: pointer;
}
.sel-box:focus {
    border-style: solid;
    border-color: #5bc0de !important;
}
.barfooter{
	border-top: 4px solid #f1f6ff;
	text-align: right;
	padding: 15px 10px;
}
.pretty>input[type='checkbox'], .pretty>input[type='radio']{
	z-index: 1000;
}
.chosen-container-single .chosen-single{
	height: 33px !important;
}
.panel-body{
	padding: 15px 0px;
}
</style>	
#end
<div class="myCanvasNav canvi-navbar col-lg-3">
  	<div style="background-color: #f1f6ff; overflow: hidden; border-radius:5px;">
  	  <div class="navbar-box">
  		<div style="padding:20px 10px 10px;">
		  	<div class="baritem">
		  		<input type="text" class="form-control input-borshow" id="nameOrOpenId" placeholder="请输入粉丝昵称或Openid"/>
		  	</div>
		  	<div class="baritem">
		  		<div class="form-group kymdok">
	            	<span class="control-label name-left">微信标签</span>
	            	<span class="control-label dropdown-right">
	            	<select id="tagsBasic" class="form-control sel-box">
					    <option value="1">包含以下任一</option>
					    <option value="2">包含以下所有</option>
					    <option value="3">排除以下任一</option>
					    <option value="4">排除以下所有</option>
					</select>
	            	</span>
		        </div>
		        <div class="form-group">
		        	<select id="tagidList" class="wx_tag input-borshow form-control form-control-chosen" multiple data-placeholder="输入标签名称">
	               		#for(tag : tags.attrs.tags)
	               			<option value="#(tag.id)">#(tag.name)</option>
	               		#end
		              </select>
		        </div> 
		  	</div>
		  	<div class="baritem">
		  		<div class="form-group kymdok">
	            	<span class="control-label name-left">最近关注来源</span>
	            	<span class="control-label dropdown-right">
	            	<select id="sSceneBasic" class="form-control sel-box">
					    <option value="1">包含</option>
					    <option value="2">排除</option>
					</select>
	            	</span>
		        </div>
		        <div class="form-group">
		        	<select id="subscribeScene" class="follow_from input-borshow form-control-chosen"  data-placeholder="全部来源">
		        		<option></option>
		                <option value="ADD_SCENE_SEARCH">公众号搜索</option>
		                <option value="ADD_SCENE_ACCOUNT_MIGRATION">公众号迁移</option>
		                <option value="ADD_SCENE_PROFILE_CARD"> 名片分享</option>
		                <option value="ADD_SCENE_QR_CODE">扫描二维码</option>
		                <option value="ADD_SCENEPROFILE LINK">图文页内名称点击</option>
		                <option value="ADD_SCENE_PROFILE_ITEM">图文页右上角菜单</option>
		                <option value="ADD_SCENE_PAID">支付后关注</option>
		                <option value="ADD_SCENE_OTHERS">其他</option>
		              </select>
		        </div> 
		  	</div>
		  	<div class="baritem" style="overflow: hidden;">
		  		<div class="form-group">
	            	<span class="control-label">关注状态</span>
		        </div>
		        <div class="form-group pretty info">
	               	<input type="radio" name="radio-follow" value="5">
	               	<label><i class="default"></i><span>全部</span></label>
		        </div>
		        <div class="form-group pretty info">
	               	<input type="radio" checked="checked" name="radio-follow" value="1">
	               	<label><i class="default"></i><span>关注中</span></label>
		        </div>
		        <div class="form-group pretty info">
	               	<input type="radio" name="radio-follow" value="0">
	               	<label><i class="default"></i><span>取消关注</span></label>
		        </div>
		  	</div>
		  	<div class="baritem" style="overflow: hidden;clear: both">
		  		<div class="form-group">
	            	<span class="control-label">性别</span>
		        </div>
		        <div class="form-group pretty info">
	               	<input type="radio" checked="checked" name="radio-sex" value="5">
	               	<label><i class="default"></i><span>全部</span></label>
		        </div>
		        <div class="form-group pretty info">
	               	<input type="radio" name="radio-sex" value="1">
	               	<label><i class="default"></i><span>男</span></label>
		        </div>
		        <div class="form-group pretty info">
	               	<input type="radio" name="radio-sex" value="2">
	               	<label><i class="default"></i><span>女</span></label>
		        </div>
		        <div class="form-group pretty info">
	               	<input type="radio" name="radio-sex" value="0">
	               	<label><i class="default"></i><span>未知</span></label>
		        </div>
		  	</div>
		  	<div class="baritem">
		  		<div class="form-group kymdok">
	            	<span class="control-label name-left">关注时间</span>
	            	<span class="control-label dropdown-right">
	            	<select id="followBasic" class="form-control sel-box">
					    <option value="1">包含</option>
					    <option value="2">排除</option>
					</select>
	            	</span>
		        </div>
		        <div class="form-group">
	                <div class="row">
						<div class="col-lg-6">
	                        <input type="text" id="follow_start_date" name="follow_start_date" readonly="readonly" style="min-width:112px; width:100%; padding-left:15px;border-radius: 5px;"
							onfocus="WdatePicker({skin:'twoer', isShowClear:true,readOnly:true,dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'follow_end_date\',{d:-1})}'})"
							class="Wdate check-value" value="#date(keywordsRedpack.startDate??,'yyyy-MM-dd')" />
	                    </div>
	                    <div class="col-lg-6">
	                        <input type="text" id="follow_end_date" name="follow_end_date" readonly="readonly" style="min-width:112px;width:100%;padding-left:15px;border-radius: 5px;"
							onfocus="WdatePicker({skin:'twoer', isShowClear:true,isShowToday:false,readOnly:true,dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'follow_start_date\',{d:1})||$dp.$DV(\'%y-%M-%d\',{d:1})}'})"
							class="Wdate check-value" value="#date(keywordsRedpack.endDate??,'yyyy-MM-dd')" />	
	                    </div>		
			        </div> 
		        </div> 
		  	</div>
		  	<div class="baritem">
		  		<div class="form-group kymdok">
	            	<span class="control-label name-left">取关时间</span>
	            	<span class="control-label dropdown-right">
	            	<select id="cancelBasic" class="form-control sel-box">
					    <option value="1">包含</option>
					    <option value="2">排除</option>
					</select>
	            	</span>
		        </div>
		        <div class="form-group">
	               <div class="row">
						<div class="col-lg-6">
	                        <input type="text" id="cancel_start_date" name="cancel_start_date" readonly="readonly" style="min-width:112px; width:100%; padding-left:10px;border-radius: 5px;"
							 onfocus="WdatePicker({skin:'twoer', isShowClear:true,readOnly:true,dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'cancel_end_date\',{d:-1})}'})"
							 class="Wdate check-value" value="#date(keywordsRedpack.startDate??,'yyyy-MM-dd')" />
	                    </div>
	                    <div class="col-lg-6">
	                        <input type="text" id="cancel_end_date" name="cancel_end_date" readonly="readonly" style="min-width:112px;width:100%;padding-left:10px;border-radius: 5px;"
							onfocus="WdatePicker({skin:'twoer', isShowClear:true,readOnly:true,isShowToday:false,dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'cancel_start_date\',{d:1})||$dp.$DV(\'%y-%M-%d\',{d:1})}'})"
							class="Wdate check-value" value="#date(keywordsRedpack.endDate??,'yyyy-MM-dd')" />	
	                    </div>		
			        </div>
		        </div> 
		  	</div>
	  	</div>
	  	<div class="barfooter">
	        <div class="barfooter-box">
	        	<button id="reset_fans_btn" class="btn">重置</button>
			    <button id="filter_fans_btn" class="btn btn-success">应用搜索条件</button>
			</div> 
	    </div>
  	  </div>
    </div>
</div>
<div class="wrapper wrapper-content col-lg-9" style="padding: 0px;">
<div class="content ibox-content">
  	<div class="panel-body">
	  <!-- <div style="float: left;margin-top: 5px;">
	    <table>
		  <tr>
			<td colspan="3" style="text-align: left; padding-right: 5px;"><button class="btn btn-success btn-xs">同步数据</button></td>
			<td colspan="3" style="text-align: left; padding-right: 5px;"><button class="btn btn-success btn-xs">批量操作</button></td>
			<td colspan="3" style="text-align: left;"><button class="btn btn-success btn-xs">导出粉丝</button></td>
		  </tr>
	    </table>
	  </div> -->
	  <div style="float: left;margin-top: 5px;">
	  	<input type="checkbox" onclick="choose()" id="checkBox" style="position: relative;top: 1px;" /><label for="checkBox">&nbsp;&nbsp;是否显示openId</label>
	  </div>
	  <div id="pager" class="jqpager" style="margin-bottom: 1px;"></div>	
	</div>
	<table id="mainTable" class="table table-striped table-bordered bootstrap-datatable datatable" border="0">
	  <thead>
		  <tr>
			<th><input type="checkbox" id="all" title="全选/反选" style="margin-right: 4px; vertical-align: middle;"/></th>
			<th><span style="vertical-align: middle;">&nbsp;&nbsp;昵称</span></th>
			<th>性别</th>
			<th>地区</th>
			<th>关注来源</th>
			<th>关注时长</th>
		  </tr>
	  </thead>   
	  <tbody class="itemsLotGrid"></tbody>
	</table>
</div>   
</div>
#end
#define script()
<script src="#(webctx)/resources/js/chosen.jquery.js"></script>
<script type="text/html" id="item_table_tr_tpl">
{{each list as item i}}
		<tr class="package">
			<td>
				<input type="checkbox" class="commchk" id="checkbox_{{item.id}}" style="margin-right: 4px; vertical-align: middle;"/>
			</td>
			<td>
				<span style="margin-right: 5px; margin-left: 2px; vertical-align: middle;" class="col-lg-1">
					<img src="{{item.headimgurl}}" width="30" height="30"></img>
				</span>
				<div class="col-lg-10">
					<span>{{item.nickname}}</span></br>
					<span class="openId" style="display:none;">{{item.openId}}</span>
				</div>
			</td>
			<td><span style="margin-right: 5px; margin-left: 2px; vertical-align: middle;">{{if item.sex == 1}} 男 {{else if item.sex == 2}} 女  {{else}} 未知 {{/if}}</span></td>
			<td><span>{{item.country}} {{item.province}} {{item.city}}</span></td>
			<td>
				{{if item.subscribeScene == "ADD_SCENE_SEARCH"}}公众号搜索
				{{else if item.subscribeScene == "ADD_SCENE_ACCOUNT_MIGRATION"}}公众号迁移
				{{else if item.subscribeScene == "ADD_SCENE_PROFILE_CARD"}}名片分享
				{{else if item.subscribeScene == "ADD_SCENE_QR_CODE"}}扫描二维码
				{{else if item.subscribeScene == "ADD_SCENEPROFILE LINK"}}图文页内名称点击
				{{else if item.subscribeScene == "ADD_SCENE_PROFILE_ITEM"}}图文页右上角菜单
				{{else if item.subscribeScene == "ADD_SCENE_PAID"}}支付后关注
				{{else if item.subscribeScene == "ADD_SCENE_OTHERS"}}其他
				{{/if}}
			</td>
			<td>{{item.followTime}}</td>
		</tr>
{{/each}}
</script>
<script type="text/template" id="table_noresult_tr_tpl">
	<tr class="package"><td colspan="7" class="center">没有结果集</td></tr>
</script>
<script type="text/javascript">
$(document).ready(function() {
	//select样式
	$('.form-control-chosen').chosen({
		  allow_single_deselect: true,
		  no_results_text:'无标签',
		  search_contains:true,
		  hide_results_on_select :false,
		  disable_search : true,
		  width: '95%'
	});
	var params = {};
	fansParams(params);
	var table = new obz.TableView("pager", obz.ctx + "/customer/list", params, function(resp){
		$(".itemsLotGrid").empty();
		if(resp && resp.list && resp.list.length>0){
			for(var i = 0; i<resp.list.length>0; i++){
				var time = (new Date().getTime()) - (new Date(resp.list[i].subscribeTime).getTime());
				//转为天数
				var min = parseInt(time/(1000 * 60));
				if(min < 60){
					resp.list[i].followTime = min +"分";
				}else if( min >= 60 && min < 1440){
					var hour = parseInt(time/(1000 * 60 * 60));
					resp.list[i].followTime = hour +"小时";
				}else if (min >= 1440 && min < 42720){
					var days = parseInt(time/(1000 * 60 * 60 * 24));
					resp.list[i].followTime = days +"天";
				}else if(min >= 42720){
					var days = parseInt(time/(1000 * 60 * 60 * 24));
					var years = days / 365;
					var months = parseInt(years * 12);
					resp.list[i].followTime = months +"月";
				}
			}
			$('.itemsLotGrid').html(template('item_table_tr_tpl', resp));
			//初始化checkbox点击事件
			TBatch.checkCheckbox();
			TBatch.initCheckboxClick();
		}else{
			$(".itemsLotGrid").append($("#table_noresult_tr_tpl").html());
		}
		choose();
	});
	table.init();

	
	$("#filter_fans_btn").click(function(){
		var params = {};
		fansParams(params);
		table.setParams(params);
		table.init();
	});
	
	
	$("#reset_fans_btn").click(function(){
		$("#nameOrOpenId").val("");
		$("#tagsBasic").val("1");
		$("#tagidList").val("");
		$("#sSceneBasic").val("1");
		$("#subscribeScene").val("");
		$(':radio[name="radio-follow"]:checked').val("1");
		$(':radio[name="radio-sex"]:checked').val("5");
		$("#followBasic").val("1");
		$("#follow_start_date").val("");
		$("#follow_end_date").val("");
		$("#cancelBasic").val("1");
		$("#cancel_start_date").val("");
		$("#cancel_end_date").val("");
		$(".form-control-chosen").trigger('chosen:updated');
		var params = {};
		fansParams(params)
		table.setParams(params);
		table.init();
	});
	
	//粉丝搜索条件的参数
	function fansParams(params){
		params.nameOrOpenId = $("#nameOrOpenId").val();
		params.tagsBasic = $("#tagsBasic").val();
		params.tagidList = JSON.stringify($("#tagidList").val());
		params.sSceneBasic = $("#sSceneBasic").val();
		params.subscribeScene =$("#subscribeScene").val();
		params.active = $(':radio[name="radio-follow"]:checked').val();
		params.sex = $(':radio[name="radio-sex"]:checked').val();
		params.followBasic = $("#followBasic").val();
		params.followStartDate = $("#follow_start_date").val();
		params.followEndDate = $("#follow_end_date").val();
		params.cancelBasic = $("#cancelBasic").val();
		params.cancelStartDate = $("#cancel_start_date").val();
		params.cancelEndDate = $("#cancel_end_date").val();
	}
	
});

function choose(){
	var flag = $("#checkBox").prop("checked");
	$(".openId").each(function(){
		if(flag){
			$(this).removeAttr("style");
		}else{
			$(this).attr("style","display:none;");
		}
	})
}

</script>
#end
